/* ============================================================
   ANIMATIONS.CSS — @keyframes + animation utility classes
   All timing/easing uses tokens from tokens.css
   ============================================================ */


/* ── Role cycling (hero section) ─────────────────────────────
   5 roles, each visible for ~16% of 15s = 2.4s each.
   Translate by multiples of 20% (each span = 20% of track).
   0%→16%: hold · 18%→20%: transition · repeat.              */
@keyframes cycle-roles {
  0%,  16% { transform: translateY(0%); }
  18%, 19% { transform: translateY(-20%); }
  20%, 36% { transform: translateY(-20%); }
  38%, 39% { transform: translateY(-40%); }
  40%, 56% { transform: translateY(-40%); }
  58%, 59% { transform: translateY(-60%); }
  60%, 76% { transform: translateY(-60%); }
  78%, 79% { transform: translateY(-80%); }
  80%, 96% { transform: translateY(-80%); }
  98%, 99% { transform: translateY(0%); }
  100%     { transform: translateY(0%); }
}


/* ── Skeleton shimmer ─────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── Stat counter trigger ─────────────────────────────────────
   JS watches for .counting class added by animations.js.
   The actual number increment runs in JS, but this class
   triggers the teal flash on the number as it counts.       */
@keyframes count-flash {
  0%   { color: var(--color-primary); }
  50%  { color: var(--color-primary-hover); }
  100% { color: var(--color-primary); }
}

.stat-number.counting {
  animation: count-flash 0.3s var(--ease-expo);
}


/* ── Timeline spine draw ─────────────────────────────────────
   The .timeline::before line draws itself on scroll.
   JS adds .timeline--visible when the section enters view.  */
.timeline::before {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1s var(--ease-expo);
}

.timeline--visible::before {
  transform: scaleY(1);
}


/* ── Staggered card entrance ──────────────────────────────────
   Applied to grids whose children should animate in sequence.
   JS adds .is-visible to .reveal-group when it enters view.
   CSS handles the stagger via nth-child delays.             */
.reveal-group > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-group > * {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity   var(--transition-slow),
      transform var(--transition-slow);
  }

  .reveal-group.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; }
  .reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; }
  .reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; }
  .reveal-group.is-visible > *:nth-child(5) { transition-delay: 320ms; }
  .reveal-group.is-visible > *:nth-child(6) { transition-delay: 400ms; }
  .reveal-group.is-visible > *:nth-child(n+7) { transition-delay: 480ms; }
}


/* ── Nav active link underline ────────────────────────────── */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-interactive);
}

.nav-link.active::after {
  transform: scaleX(1);
}


/* ── Page fade-in on load ─────────────────────────────────── */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: page-enter 0.5s var(--ease-expo) both;
}


/* ── Hover lift utility ────────────────────────────────────── */
.hover-lift {
  transition:
    transform  var(--transition-interactive),
    box-shadow var(--transition-interactive);
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}